<!-- regionDialog -->
<template>
  <div>
    <el-dialog :title="title" :visible="regionVisible" @close="close" @open="updataOpenFn">
      <el-form ref="regionRef" :model="regionForm" :rules="formRules">
        <el-form-item
          label="区域名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="regionForm.name"
            autocomplete="off"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="备注说明" :label-width="formLabelWidth" prop="remark">
          <el-input
            v-model="regionForm.remark"
            type="textarea"
            autocomplete="off"
            placeholder="请输入备注（不超过40字）"
            maxlength="40"
            :autosize="{ minRows: 3, maxRows: 6 }"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-show="isShow" :visible="isShow" title="区域详情" @close="close" @open="detailRegion">
      <el-form ref="regionRef" :model="regionForm">
        <el-form-item
          label="区域名称:"
          :label-width="formLabelWidth"
          prop="regionName"
        >
          {{ regionForm.name }}
        </el-form-item>
        <el-form-item
          label="包含点位:"
          :label-width="formLabelWidth"
          prop="regionName"
        >
          <el-table :data="list">
            <el-table-column label="序号" width="60" type="index" />
            <el-table-column label="区域名称" prop="name" />
            <el-table-column label="设备数量" prop="nodeCount" />
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { addRegion, getRegionDetails, updateRegion } from '@/api'
export default {
  props: {
    regionVisible: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    regionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      regionForm: {
        name: '',
        remark: ''
      },
      formLabelWidth: '120px',

      formRules: {
        regionName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],

        remark: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      list: []
    }
  },
  computed: {
    title() {
      return this.regionForm.id ? '修改区域' : '新增区域'
    }
  },
  methods: {
    submit() {
      this.$refs.regionRef.validate(async(valid) => {
        if (!valid) return

        if (this.regionForm.id) {
          await updateRegion(this.regionForm.id, {
            regionName: this.regionForm.name,
            remark: this.regionForm.remark
          })
        } else {
          await addRegion({
            ...this.regionForm,
            regionName: this.regionForm.name
          })
        }
        this.$message.success(this.title + '成功')
        this.close()
        this.$emit('addRegion')
      })
    },
    close() {
      this.$emit('close')
      this.$refs.regionRef.resetFields()
      this.regionForm = {
        regionName: '',
        remark: ''
      }
      this.list = []
    },
    // 区域详情页面打开
    async detailRegion() {
      const res = await getRegionDetails(this.regionId)
      console.log(res)
      this.regionForm = res.data
      this.list.push(res.data)
    },
    // 修改页面打开
    async updataOpenFn(id) {
      if (id) {
        const res = await getRegionDetails(id)
        // console.log(res)
        this.regionForm = res.data
      }
    }
  }

}
</script>
<style lang='scss' scoped>
::v-deep .el-dialog__header {
  background: #fff;
  .el-dialog__title {
    font-weight: 700;
    font-size: 16px;
    color: #333;
  }
}
::v-deep .el-icon-close:before {
  /* color: #fff; */
  color: #909399;
}
::v-deep .el-table {
  margin-top: -14px;
}
</style>
